<template>
  <div o-Container>
    <!-- modified: modify, -->
    <o-list v-bind:source="list.sensorData" v-bind="{  searched: search, exported: output }">
      <template slot="config" slot-scope="scope">
        <i class="el-icon-view" v-on:click="modify(scope)"
          style="cursor: pointer;font-size: 12px;width: 100%;text-align: center;"></i>
      </template>
    </o-list>
    <o-dialog v-bind:source="panel" v-bind="{ opened: load, closed: load }">
      <template slot="content">
        <o-item v-bind:source="item.sensorData" v-bind="{ backed: back }"></o-item>
      </template>
    </o-dialog>
  </div>
</template>
<script>
export default {
  name: "mms_iot_sensor_list", /* 这个name暂时不知道用啥用，根据官方文档说的是方便排错的 */
  data() {
    return {
      octopus: this.$parent.octopus,
      list: {
        sensorData: {
          configWidth: 20,
          data: {
            id: 511, // 菜单表的八爪鱼ID
            cellData: [
              { name: "ServerID", width: 140, searchKey: "=",link: [{mapping: "TypeID", value: "8"}]},
              { name: "CreateDate", width: 170 },
              { name: "Path", width: 430, searchKey: "LIKE" },
              { name: "Qos", width: 70, },
              { name: "Data", width: 1000, searchKey: "LIKE", },
              { name: "DayData", width: 100, searchKey: "=" },
            ],
          },
          // configWidth: 50,
          showNumber: true,
          exportName: '传感器数据'
        },
      },
      item: {
        sensorData: {
          // 以下参数默认由组件内部创建，但是如果有需要，开发人员可在这里提前设置，组件将按照您的预期渲染。
          // cache: false,
          // control: null,
          // dataExtend: null,
          data: {
            id: 511,
            value: "",
            cellData: [
              { name: "ServerID" },
              { name: "Path" },
              { name: "Qos" },
              { name: "CreateDate" },
              { name: "Data" },
            ],
          },
        },
      },
      panel: {
        visible: false,
      },
    }
  },
  created: function () {
    this.init();
    // 查询。
    let SearchDayData = this.octopus.tools.dateFormat(new Date(), 'yyyyMMdd');
    // 追加默认日期
    this.list.sensorData.data.paramData = { SearchDayData: SearchDayData };
    this.item.sensorData.data.paramData = { SearchDayData: SearchDayData };

    // this.list.sensorData.data = {
    //   id: 511, // 菜单表的八爪鱼ID
    //   cellData: [
    //     {name: "ServerID", width: 140, searchKey: "=",},
    //     {name: "Path", width: 70, searchKey: "LIKE"},
    //     {name: "Qos", width: 70,},
    //     {name: "Data", width: 90, searchKey: "LIKE",},
    //     {name: "CreateDate", width: 170},
    //     // {name: "DayData", width: 170},
    //   ],
    //   paramData: {
    //     DayData: this.octopus.tools.dateFormat(new Date(), 'yyyyMMdd'),
    //   }
    // }
  },
  methods: {
    init: function () {
      let url = this.octopus.vue.$route.path;
      // MMS
      if (url.indexOf("MMS/IoT/Sensor/List") > 0) {
        // this.octopus.tools.parseCell(this.list.building.data, "ProjectID").filterValue = this.octopus.passport.project;//默认筛选当前登录的小区
        // this.octopus.tools.parseCell(this.list.building.data, "ProjectID").show = false;
        // this.octopus.tools.parseCell(this.list.building.data, "CompanyID").show = false;
      }
      // MDM
      else {
        // this.octopus.tools.parseCell(this.list.sensorData.data, "ProjectID").show = false;
        // this.octopus.toohis.octopus.tools.parseCell(this.list.senls.parseCell(this.list.sensorData.data, "ProjectID").filterValue = this.octopus.passport.project;
      }
    },
    output: function (data) {
      this.octopus.tips.success("下载完成。");
      // 核心思想是cellData包含search数据（不管有没有），回传以后发送export指令，后台api会直接返回导出的数据提供下载。
    },
    search: function (new_cell, old_cell) {
      // 只有查询日期才触发。
      if (new_cell.name == "DayData") {
        let SearchDate = new Date(new_cell.searchValue + " 00:00:00");
        let SearchDay = this.octopus.tools.dateFormatToString(SearchDate, "yyyyMMdd");

        let NowDate = new Date();
        // 如果查询日期大于
        if (SearchDate > NowDate) {
          // 还原分区表
          // this.octopus.tools.parseCell(this.list.sensorData.data, "DayData").searchValue = SearchDate;
          let o = this;
          // 加上timeout 是因为不加这个，以下绑定只能生效1次，因为vue虚拟树已经变成null，再选择一个过期的日期，虚拟树没有变化，导致无法mvvm控件。
          setTimeout(function () {
            o.octopus.tips.error("不能选择大于今天的日期，即将撤回当天。");
            o.octopus.tools.parseCell(o.list.sensorData.data, "DayData").searchValue = null;
          }, 100);

          // this.octopus.tools.parseCell(this.list.sensorData.data, "DayData").searchValue = null;
          this.list.sensorData.data.paramData.SearchDayData = this.octopus.tools.dateFormatToString(NowDate, "yyyyMMdd");
        }
        // 如果查询内容被清空
        else if (new_cell.searchValue == null) {
          // 还原分区表
          this.list.sensorData.data.paramData.SearchDayData = this.octopus.tools.dateFormatToString(NowDate, "yyyyMMdd");
        }
        // 分区查询
        else {
          this.list.sensorData.data.paramData.SearchDayData = SearchDay;
        }

        // 执行查询。
        this.list.sensorData.control.load();

        // 查询委托，禁止回调。适用于分库分表 或 自定义查询。
        return false;
      }
    },
    modify: function (row) {
      this.item.sensorData.data.value = row.data.row.ID; //赋值
      this.item.sensorData.data.paramData.SearchDayData = this.list.sensorData.data.paramData.SearchDayData;
      this.item.sensorData.control.load(); //刷新
      this.panel.visible = true; //打开
    },
    view: function (row) {
      alert("view key: " + JSON.stringify(row)); //提示
    },
    del: function (row) {
      alert("del key: " + JSON.stringify(row)); //提示
    },
    save: function () {
      // 刷新list
      this.list.sensorData.control.load();
      this.back(); //后退
    },
    back: function () {
      this.panel.visible = false; // 取消
    }
  },
  props: ["oData"] //数据
}
</script>
